<template name="skeleton">
  <view class="sk-container">
    <view class="layout pageBg data-v-83a5a03c sk-image">
      <view class="banner banner data-v-83a5a03c data-v-83a5a03c">
        <swiper
          style="background: #eee"
          autoplay="false"
          circular="true"
          indicator-dots="true"
          class="data-v-83a5a03c data-v-83a5a03c"
          indicator-active-color="#fff"
          indicator-color="rgba(255,255,255,0.5)"
          current="0"
        ></swiper>
      </view>
      <view class="notice notice data-v-83a5a03c data-v-83a5a03c">
        <view class="left left data-v-83a5a03c data-v-83a5a03c">
          <view
            is="node-modules/@dcloudio/uni-ui/lib/uni-icons/uni-icons"
            class="data-v-83a5a03c data-v-83a5a03c"
          >
            <text
              class="uni-icons icons--uni-icons uniui-sound-filled icons--uniui-sound-filled sk-pseudo sk-pseudo-circle"
              style="color: #333333; font-size: 20px"
            ></text>
          </view>
          <text
            class="text data-v-83a5a03c sk-transparent sk-text-32-9268-851 sk-text"
            >公告</text
          >
        </view>
        <view class="center center data-v-83a5a03c data-v-83a5a03c">
          <swiper
            autoplay="false"
            circular="true"
            vertical="true"
            class="data-v-83a5a03c data-v-83a5a03c"
            duration="300"
            interval="1500"
            current="0"
          >
            <swiper-item
              class="data-v-83a5a03c data-v-83a5a03c"
              style="
                position: absolute;
                width: 100%;
                height: 100%;
                transform: translate(0px, 0%) translateZ(0px);
              "
            >
              <navigator
                class="data-v-83a5a03c sk-transparent sk-text-34-1463-263 sk-text"
                open-type="reLaunch"
                >咸虾米壁纸，版权公告</navigator
              >
            </swiper-item>
            <swiper-item
              class="data-v-83a5a03c data-v-83a5a03c"
              style="
                position: absolute;
                width: 100%;
                height: 100%;
                transform: translate(0px, 100%) translateZ(0px);
              "
            >
              <navigator
                class="data-v-83a5a03c sk-transparent sk-text-34-1463-577 sk-text"
                open-type="reLaunch"
                >欢迎关注咸虾米圈子公众号，获取UP主咸虾米最新动态。</navigator
              >
            </swiper-item>
          </swiper>
        </view>
        <view class="right right data-v-83a5a03c data-v-83a5a03c">
          <view class="data-v-83a5a03c data-v-83a5a03c">
            <text
              class="uni-icons icons--uni-icons uniui-right icons--uniui-right sk-pseudo sk-pseudo-circle"
              style="color: #333; font-size: 16px"
            ></text>
          </view>
        </view>
      </view>
      <view class="select select data-v-83a5a03c data-v-83a5a03c">
        <view class="data-v-83a5a03c data-v-83a5a03c">
          <view
            class="common-title title--common-title data-v-8c90bf19 title--data-v-8c90bf19"
          >
            <view
              class="name title--name data-v-8c90bf19 title--data-v-8c90bf19"
            >
              <view class="sk-transparent sk-text-14-2857-169 sk-text"
                >每日推荐</view
              >
            </view>
            <view
              class="custom title--custom data-v-8c90bf19 title--data-v-8c90bf19"
            >
              <view class="date date data-v-83a5a03c data-v-83a5a03c">
                <view
                  is="node-modules/@dcloudio/uni-ui/lib/uni-icons/uni-icons"
                  class="data-v-83a5a03c data-v-83a5a03c"
                >
                  <text
                    class="uni-icons icons--uni-icons uniui-calendar icons--uniui-calendar sk-pseudo sk-pseudo-circle"
                    style="color: #74ddbe; font-size: 18px"
                  ></text>
                </view>
                <view class="text text data-v-83a5a03c data-v-83a5a03c">
                  <view class="data-v-83a5a03c data-v-83a5a03c">
                    <text class="sk-transparent sk-text-14-2857-34 sk-text"
                      >08日</text
                    >
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="content content data-v-83a5a03c data-v-83a5a03c">
          <scroll-view
            scroll-x="true"
            class="scoll_view data-v-83a5a03c data-v-83a5a03c"
          >
            <view
              style="background: #eee"
              class="box box data-v-83a5a03c data-v-83a5a03c"
            >
              <image class="data-v-83a5a03c sk-image" mode="aspectFill"></image>
            </view>
            <view
              style="background: #eee"
              class="box box data-v-83a5a03c data-v-83a5a03c"
            >
              <image class="data-v-83a5a03c sk-image" mode="aspectFill"></image>
            </view>
            <view
              style="background: #eee"
              class="box box data-v-83a5a03c data-v-83a5a03c"
            >
              <image class="data-v-83a5a03c sk-image" mode="aspectFill"></image>
            </view>
            <view
              style="background: #eee"
              class="box box data-v-83a5a03c data-v-83a5a03c"
            >
              <image class="data-v-83a5a03c sk-image" mode="aspectFill"></image>
            </view>
          </scroll-view>
        </view>
      </view>
      <view class="theme theme data-v-83a5a03c data-v-83a5a03c">
        <view class="data-v-83a5a03c data-v-83a5a03c">
          <view
            class="common-title title--common-title data-v-8c90bf19 title--data-v-8c90bf19"
          >
            <view
              class="name title--name data-v-8c90bf19 title--data-v-8c90bf19"
            >
              <view class="sk-transparent sk-text-14-2857-402 sk-text"
                >专题精选</view
              >
            </view>
            <view
              class="custom title--custom data-v-8c90bf19 title--data-v-8c90bf19"
            >
              <navigator
                class="more data-v-83a5a03c sk-transparent sk-text-14-2857-841 sk-text"
                open-type="reLaunch"
                >More+</navigator
              >
            </view>
          </view>
        </view>
        <view class="content content data-v-83a5a03c data-v-83a5a03c">
          <view class="data-v-83a5a03c data-v-83a5a03c">
            <view
              class="themeItem item--themeItem data-v-37d563bd item--data-v-37d563bd"
            >
              <navigator
                class="box item--box data-v-37d563bd item--data-v-37d563bd"
              >
                <image
                  class="pic item--pic data-v-37d563bd item--data-v-37d563bd sk-image"
                  mode="aspectFill"
                ></image>
                <view
                  class="mask item--mask data-v-37d563bd item--data-v-37d563bd sk-transparent sk-text-14-2857-96 sk-text"
                  >可爱萌宠</view
                >
                <view
                  class="tab item--tab data-v-37d563bd item--data-v-37d563bd sk-transparent sk-text-14-2857-87 sk-text"
                  >2天前更新</view
                >
              </navigator>
            </view>
          </view>
          <view class="data-v-83a5a03c data-v-83a5a03c">
            <view
              class="themeItem item--themeItem data-v-37d563bd item--data-v-37d563bd"
            >
              <navigator
                class="box item--box data-v-37d563bd item--data-v-37d563bd"
              >
                <image
                  class="pic item--pic data-v-37d563bd item--data-v-37d563bd sk-image"
                  mode="aspectFill"
                ></image>
                <view
                  class="mask item--mask data-v-37d563bd item--data-v-37d563bd sk-transparent sk-text-14-2857-664 sk-text"
                  >AI美图</view
                >
                <view
                  class="tab item--tab data-v-37d563bd item--data-v-37d563bd sk-transparent sk-text-14-2857-209 sk-text"
                  >2天前更新</view
                >
              </navigator>
            </view>
          </view>
          <view class="data-v-83a5a03c data-v-83a5a03c">
            <view
              class="themeItem item--themeItem data-v-37d563bd item--data-v-37d563bd"
            >
              <navigator
                class="box item--box data-v-37d563bd item--data-v-37d563bd"
              >
                <image
                  class="pic item--pic data-v-37d563bd item--data-v-37d563bd sk-image"
                  mode="aspectFill"
                ></image>
                <view
                  class="mask item--mask data-v-37d563bd item--data-v-37d563bd sk-transparent sk-text-14-2857-946 sk-text"
                  >自然风光</view
                >
              </navigator>
            </view>
          </view>
          <view class="data-v-83a5a03c data-v-83a5a03c">
            <view
              class="themeItem item--themeItem data-v-37d563bd item--data-v-37d563bd"
            >
              <navigator
                class="box item--box data-v-37d563bd item--data-v-37d563bd"
              >
                <image
                  class="pic item--pic data-v-37d563bd item--data-v-37d563bd sk-image"
                  mode="aspectFill"
                ></image>
                <view
                  class="mask item--mask data-v-37d563bd item--data-v-37d563bd sk-transparent sk-text-14-2857-559 sk-text"
                  >明星美女</view
                >
                <view
                  class="tab item--tab data-v-37d563bd item--data-v-37d563bd sk-transparent sk-text-14-2857-529 sk-text"
                  >5天前更新</view
                >
              </navigator>
            </view>
          </view>
          <view class="data-v-83a5a03c data-v-83a5a03c">
            <view
              class="themeItem item--themeItem data-v-37d563bd item--data-v-37d563bd"
            >
              <navigator
                class="box item--box data-v-37d563bd item--data-v-37d563bd"
              >
                <image
                  class="pic item--pic data-v-37d563bd item--data-v-37d563bd sk-image"
                  mode="aspectFill"
                ></image>
                <view
                  class="mask item--mask data-v-37d563bd item--data-v-37d563bd sk-transparent sk-text-14-2857-9 sk-text"
                  >创意色彩</view
                >
                <view
                  class="tab item--tab data-v-37d563bd item--data-v-37d563bd sk-transparent sk-text-14-2857-971 sk-text"
                  >1月前更新</view
                >
              </navigator>
            </view>
          </view>
          <view class="data-v-83a5a03c data-v-83a5a03c">
            <view
              class="themeItem item--themeItem data-v-37d563bd item--data-v-37d563bd"
            >
              <navigator
                class="box item--box data-v-37d563bd item--data-v-37d563bd"
              >
                <image
                  class="pic item--pic data-v-37d563bd item--data-v-37d563bd sk-image"
                  mode="aspectFill"
                ></image>
                <view
                  class="mask item--mask data-v-37d563bd item--data-v-37d563bd sk-transparent sk-text-14-2857-487 sk-text"
                  >独特建筑</view
                >
              </navigator>
            </view>
          </view>
          <view class="data-v-83a5a03c data-v-83a5a03c">
            <view
              class="themeItem item--themeItem data-v-37d563bd item--data-v-37d563bd"
            >
              <navigator
                class="box item--box data-v-37d563bd item--data-v-37d563bd"
              >
                <image
                  class="pic item--pic data-v-37d563bd item--data-v-37d563bd sk-image"
                  mode="aspectFill"
                ></image>
                <view
                  class="tab item--tab data-v-37d563bd item--data-v-37d563bd sk-transparent sk-text-14-2857-41 sk-text"
                  >1月前更新</view
                >
              </navigator>
            </view>
          </view>
          <view class="data-v-83a5a03c data-v-83a5a03c">
            <view
              class="themeItem item--themeItem data-v-37d563bd item--data-v-37d563bd"
            >
              <navigator
                class="box item--box data-v-37d563bd item--data-v-37d563bd"
              >
                <image
                  class="pic item--pic data-v-37d563bd item--data-v-37d563bd sk-image"
                  mode="aspectFill"
                ></image>
                <view
                  class="tab item--tab data-v-37d563bd item--data-v-37d563bd sk-transparent sk-text-14-2857-209 sk-text"
                  >14天前更新</view
                >
              </navigator>
            </view>
          </view>
          <view class="data-v-83a5a03c data-v-83a5a03c">
            <view
              class="themeItem item--themeItem data-v-37d563bd item--data-v-37d563bd"
            >
              <navigator
                class="box item--box more item--more data-v-37d563bd item--data-v-37d563bd"
                open-type="reLaunch"
              >
                <image
                  class="pic item--pic data-v-37d563bd item--data-v-37d563bd sk-image"
                  mode="aspectFill"
                ></image>
                <view
                  class="mask item--mask data-v-37d563bd item--data-v-37d563bd"
                ></view>
              </navigator>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style>
.sk-transparent {
  color: transparent !important;
}
.sk-text-14-2857-961 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 59.2308rpx;
  position: relative !important;
}
.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}
.sk-text-14-2857-250 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 37.6923rpx;
  position: relative !important;
}
.sk-text-32-9268-851 {
  background-image: linear-gradient(
    transparent 32.9268%,
    #eeeeee 0%,
    #eeeeee 67.0732%,
    transparent 0%
  ) !important;
  background-size: 100% 78.8462rpx;
  position: relative !important;
}
.sk-text-34-1463-263 {
  background-image: linear-gradient(
    transparent 34.1463%,
    #eeeeee 0%,
    #eeeeee 65.8537%,
    transparent 0%
  ) !important;
  background-size: 100% 78.8462rpx;
  position: relative !important;
}
.sk-text-34-1463-577 {
  background-image: linear-gradient(
    transparent 34.1463%,
    #eeeeee 0%,
    #eeeeee 65.8537%,
    transparent 0%
  ) !important;
  background-size: 100% 78.8462rpx;
  position: relative !important;
}
.sk-text-14-2857-169 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 48.4615rpx;
  position: relative !important;
}
.sk-text-14-2857-34 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 43.0769rpx;
  position: relative !important;
}
.sk-text-14-2857-402 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 48.4615rpx;
  position: relative !important;
}
.sk-text-14-2857-841 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 43.0769rpx;
  position: relative !important;
}
.sk-text-14-2857-96 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 40.3846rpx;
  position: absolute !important;
}
.sk-text-14-2857-87 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 29.6154rpx;
  position: absolute !important;
}
.sk-text-14-2857-664 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 40.3846rpx;
  position: absolute !important;
}
.sk-text-14-2857-209 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 29.6154rpx;
  position: absolute !important;
}
.sk-text-14-2857-946 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 40.3846rpx;
  position: absolute !important;
}
.sk-text-14-2857-559 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 40.3846rpx;
  position: absolute !important;
}
.sk-text-14-2857-529 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 29.6154rpx;
  position: absolute !important;
}
.sk-text-14-2857-9 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 40.3846rpx;
  position: absolute !important;
}
.sk-text-14-2857-971 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 29.6154rpx;
  position: absolute !important;
}
.sk-text-14-2857-487 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 40.3846rpx;
  position: absolute !important;
}
.sk-text-14-2857-41 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 29.6154rpx;
  position: absolute !important;
}
/* .sk-image {
  background: #eee !important;
} */
.sk-pseudo::before,
.sk-pseudo::after {
  background: #efefef !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
  border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
  border-radius: 50% !important;
}
.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
.pic {
  background: #eee !important;
}
</style>
